<template>
  <div class='me'>
    <!-- 头部 -->
    <header>
      <div class="header_content">
        <img :src="userInfo.user_info.photo_url" alt="">
        <div class="nick_name">{{userInfo.user_info.nickname}}</div>
      </div>
      <!-- <div class="credit">
        <div>当前积分</div>
        <div><span>{{userInfo.user_info.integral}}</span>积分</div>
      </div> -->
    </header>
    <!-- 头部结束 -->

    <!-- 中间菜单栏 -->
    <div class="menu">
      <div class="menu_item cartIcon_wrapper" @click="toOrder(1)">
        <img src="../../../static/images/me/pay.png" alt="">
        <div>待付款</div>
        <div class="cartIcon1" v-if="orderList.Pending_payment!=0 &&orderList.Pending_payment">{{orderList.Pending_payment}}</div>
      </div>
      <div class="menu_item cartIcon_wrapper" @click="toOrder(2)">
        <img src="../../../static/images/me/ship.png" alt="">
        <div>待发货</div>
        <div class="cartIcon1" v-if="orderList.to_be_delivered!=0 &&orderList.to_be_delivered">{{orderList.to_be_delivered}}</div>
      </div>
      <div class="menu_item cartIcon_wrapper" @click="toOrder(3)">
        <img src="../../../static/images/me/recieve.png" alt="">
        <div>待收货</div>
        <div class="cartIcon1" v-if="orderList.Pending_receipt!=0 &&orderList.Pending_receipt">{{orderList.Pending_receipt}}</div>
      </div>
      <div class="menu_item cartIcon_wrapper" @click="toOrder(4)">
        <img src="../../../static/images/me/comment.png" alt="">
        <div>待评价</div>
        <div class="cartIcon1" v-if="orderList.Wait_comment!=0 &&orderList.Wait_comment">{{orderList.Wait_comment}}</div>
      </div>
      <div class="menu_item cartIcon_wrapper" @click="toOrder('')">
        <img src="../../../static/images/me/order.png" alt="">
        <div>全部订单</div>
      </div>
    </div>
    <!-- 中间菜单栏 -->

    <div class="list">
      <div class="list_item">
        <navigator url="/pages/order/main" >
          <span>全部订单</span>
          <span class="list_item_arrow">
            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/right.png" alt="">
          </span>
        </navigator>
      </div>
      <div class="list_item">
        <navigator url="/pages/address/main?type=address" >
          <span>收货地址</span>
          <span class="list_item_arrow">
            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/right.png" alt="">
          </span>
        </navigator>
      </div>
      <div class="list_item">
        <navigator url="/pages/cart/main"  open-type="switchTab" class="cartIcon_wrapper">
          <span>购物车</span>
          <span class="list_item_arrow">
            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/right.png" alt="">
          </span>
          <div class="cartIcon" v-if="cartListNum!=0">{{cartListNum}}</div>
        </navigator>
      </div>
<!--       <div class="list_item">
        <span>我的收藏</span>
        <span class="list_item_arrow">
          <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/right.png" alt="">
        </span>
      </div> -->
      <!-- <div class="list_item">
        <navigator url="/pages/creditList/main">
          <span>我的积分</span>
          <span class="list_item_arrow">
            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/right.png" alt="">
          </span>
        </navigator>
      </div> -->
      <!-- <div class="list_item">
        <navigator url="/pages/coupon/main">
          <span>优惠券</span>
          <span class="list_item_arrow">
            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/right.png" alt="">
          </span>
        </navigator>
      </div> -->
      <!-- <div class="list_item">
        <navigator url="/pages/discount/discountList/main">
          <span>我的砍价</span>
          <span class="list_item_arrow">
            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/right.png" alt="">
          </span>
        </navigator>
      </div> -->
      <!-- <div class="list_item">
        <div @click="scanCode">
          <span style="margin-left:10px;">扫一扫</span>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
  export default{
    name:'me',
    data(){
      return {
        userInfo:{
          user_info:{
            photo_url:"",
            nickname:"",
          }
        },
        cartListNum:"",
        orderList:''
      }
    },
    computed:{

    },
    methods:{
      async getUserInfo(){
        var userToken=wx.getStorageSync('userToken') 
        let res=await this.$request.getData('/ucenter/getUserInfo',{user_token:userToken})
        this.userInfo=res.data.data
      },
      toOrder(id){
        this.$currency.navigateTo('/pages/order/main?status='+id)
      },
      async getCartList(){
        let userToken=wx.getStorageSync('userToken');
        let res=await this.$request.getData('/goods/getShopCart',{user_token:userToken});
        if(res.data.level=='success'){
          this.cartListNum=res.data.data.length;
        }
      },
      async getOrderList(status){
      var userToken=wx.getStorageSync('userToken')
      let res=await this.$request.getData('/order/getUserAllOrders',{user_token:userToken,status:'',page:0,limit:5})
        if(res.data.level=='success'){
          this.orderList=res.data
        }
      },
     async sendCode(code,url){
        var userToken=wx.getStorageSync('userToken')
        let res=await this.$request.getData('/ucenter/scanningIntegral',{
          user_token:userToken,
          qrcode_key:code,
          url
        })
        if(res.data.level=='success'){
          this.$currency.showToast(res.data.data.get_integral)
          this.getUserInfo()
        }else{
          this.$currency.showToast(res.data.message)
        }
        
      },
      scanCode(){
        let _this=this
        wx.scanCode({
          success(res) {
            const res1=res.result
            const code=res1.split('?')[1]
            const url=res1.split('?')[0]
            _this.sendCode(code,url)
            
          }
      })
      }
    },
    
    onShow(){
      this.getUserInfo()
      this.getCartList()
      this.getOrderList()
    }
  }
</script>

<style scoped>
  .me{
    width:100%;
    height:100%;
    background:#eee;
  }

  /* 头部 */
  header{
    width:100%;
    height:120px;
    background:url(https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/f6/web/images/index/tel_content/tel_10.jpg);
    background-size: cover;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
  }
  .header_content{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    color:#fff;
  }
  .header_content>img{
    width:60px;
    height: 60px;
    border-radius: 50%;
  }
  .nick_name{
    margin-top:10px;
    text-align: center;
    width: 100%;
  }
  .credit{
    font-size: 14px;
    display: flex;
    margin-right: 20px;
    align-content: center;
    flex-wrap: wrap;
    color:#fff;
  }
  .credit>div{
    width:100%;
    padding:10px 0;
  }
  .credit>div span{
    font-size: 20px;
  }

  /* 中间菜单栏 */
  .menu{
    background:#fff;
    width:100%;
    display: flex;
    height: 100px;

  }
  .menu_item{
    font-size: 12px;
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .menu_item>img{
    width:35px;
    height:35px;
  }

  /* 列表栏 */

  .list{
    width:100%;
    margin-top:15px;
  }
  .list_item ,navigator{
    width:100%;
    height:50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background:#fff;
    border-bottom:1px solid #eee;
  }
  .list_item>span:nth-child(1){
    margin-left: 10px;
  }
  navigator>span:nth-child(1){
    margin-left: 10px;
  }
  .list_item_arrow{
    display: flex;
    flex:1;
    justify-content: flex-end;
    margin-right:10px;
  }
  .list_item_arrow>img{
    width:20px;
    height:20px;
  }

  .cartIcon_wrapper{
    position: relative;
  }
  .cartIcon{
    font-size: 10px;
    position: absolute;
    background:red;
    left:50px;
    width:15px;
    height: 15px;
    line-height: 15px;
    color:#fff;
    text-align: center;
    border-radius: 50%;
    top:5px;
  }
  .cartIcon1{
    font-size: 10px;
    position: absolute;
    background:red;
    left:50px;
    width:15px;
    height: 15px;
    line-height: 15px;
    color:#fff;
    text-align: center;
    border-radius: 50%;
    top:15px;
  }
</style>
